<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>鲜花详情</title>
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=0">
    <!-- 电话号码不被显示为超链接 -->
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Expires" content="0">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <link rel="stylesheet" href="./static/css/animate.css">
    <link rel="stylesheet" href="./static/css/com.css">
    <link rel="stylesheet" href="./static/css/swiper.min.css">
    <link rel="stylesheet" href="./static/css/mobileSelect.css">
    <link rel="stylesheet" href="./static/css/magic.min.css">
    <link rel="stylesheet" href="./static/css/goods-info.css">

</head>

<body>
    <div id='app'>

        <hea-controll :icon_json='heaIconJson' @right2='right2'></hea-controll>

        <div id='mask' style='z-index:102' v-if='offShareContent||offShareIcon||offVoucher' @click='offShareContent = offShareIcon = offVoucher = false;'></div>

        <!-- 优惠卷 -->
        <transition enter-active-class='animation-target1' leave-active-class='magictime slideDown'>
            <div class='voucher-wrap' v-if='offVoucher'>
                <h1>优惠卷</h1>
                <p class='vou-discount'>
                    <img src="./static/img/icon-ye.png" width="30px" height="30px">
                    <span>商品售价￥<span>1200</span>，使用以下优惠可减<span style="color:red">￥<span>120</span></span>
                    </span>
                </p>
                <p class='vou-discount'>
                    <img src="./static/img/icon-qiang.png" width="30px" height="30px">
                    <span>购买可获得<span style="color:red;">69</span>积分</span>
                </p>
                <p class='vou-have-discount'>
                    <span>领卷</span>
                    <span>
                        <span>已有积分：</span>
                    <span>1288</span>
                    </span>
                </p>
                <div class='receive-vou'>
                    <div>
                        <p><span>￥</span><span>120</span></p>
                        <p style="padding-top:10px;">- - - 优惠卷 - - -</p>
                    </div>
                    <div>
                        <p>满<span>1000</span>使用</p>
                        <button @click='getVoucher'>立即领取</button>
                    </div>
                </div>
                <p class='vou-explain'>以上价格将作为初步估计，不代表最终购买价格</p>
                <button class='vou-sure' @click='offVoucher=false;'>完成</button>
            </div>
        </transition>
        <!-- 优惠卷 -->

        <!-- 分享 -->
        <transition enter-active-class='animated bounceIn' leave-active-class='animated bounceOut'>
            <div class='share-icon-wrap' v-if='offShareIcon'>
                <div>
                    <img src="./static/img/weixin.png" width="60px" height="48px">
                    <span>微信</span>
                </div>
                <div>
                    <img src="./static/img/qq.png" width="60px" height="60px">
                    <span>QQ</span>
                </div>
            </div>
        </transition>
        <transition enter-active-class='magictime vanishIn' leave-active-class='magictime vanishOut'>
            <div class='share-content-wrap' v-if='offShareContent'>
                <div class='share-goods'>
                    <img class='share-goods-logo' src="./static/img/img-hea-hua.png">
                    <img style="border-radius: 20px 20px 0 0;" class='share-goods-img' src="http://img.thebeastshop.com/image/20180830151623949228.JPG@4e_0o_0l_721h_690w_90q.jpg" width="100%">
                    <!-- 这里还有一个商城名字 -->
                </div>
                <div class='share-info-wrap'>
                    <div class='share-info-font'>
                        <p>SDH SDFHJKA SDFE SDFHJ</p>
                        <P>玫瑰询烂-爱你在心尖（18支）</P>
                        <p>￥1200</p>
                    </div>
                    <div>
                        <img src="./static/img/qr.png" width="100%">
                    </div>
                </div>
            </div>
        </transition>
        <!-- 分享 -->

        <div class='goods-info-wrap'>
            <div>
                <div class="swiper-container">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide"><img src="http://img.thebeastshop.com/image/20180830151623949228.JPG@4e_0o_0l_721h_690w_90q.jpg" width="100%"></div>
                        <div class="swiper-slide"><img src="http://img.thebeastshop.com/image/20180830163703477535.jpg@4e_0o_0l_721h_690w_90q.jpg" width="100%"></div>
                        <div class="swiper-slide"><img src="http://img.thebeastshop.com/image/20180913183701200128.jpg@4e_0o_0l_721h_690w_90q.jpg" width="100%"></div>
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
            <div class='goods-introduce'>
                <p>Gift box flower bounquet</p>
                <p>玫瑰询烂 - 爱你在心尖 （18支）</p>
                <p>限量款</p>
                <p><span>￥</span><span>1200</span></p>
                <div>
                    <button @click='openShare'><img src="./static/img/icon-share.png" width="25px" height="25px" ></button>
                    <button @click='offVoucher=true'><img src="./static/img/icon-juan.png" width="25px" height="25px" ></button>
                </div>
            </div>
            <div class='change-guige'>
                <div>
                    <p>
                        <span>规格</span>
                        <span>请选择颜色分类</span>
                    </p>
                    <img src="./static/img/icon-left-huise.png" width="25px" height="25px">
                </div>
                <div class='change-city'>
                    <p>
                        <span>地区</span>
                        <span v-text="sendAddress.length?sendAddress[0].value+' '+sendAddress[1].value+' '+sendAddress[2].value:'请选择地址'">请选择地址</span>
                    </p>
                    <img src="./static/img/icon-left-huise.png" width="25px" height="25px">
                </div>
                <div>
                    <p>
                        <span>配送</span>
                        <span>快递</span>
                    </p>
                    <!-- <img src="./static/img/icon-left-huise.png" width="25px" height="25px"> -->
                </div>
            </div>

            <!-- 底部推荐商品 -->
            <div style="padding:20px 30px;">
                <index-goods-title :font='goodsTitle'></index-goods-title>
                <goods-info :goods_info='goodsInfo'></goods-info>
            </div>
            <!-- 底部推荐商品 -->


            <div>
                <img v-for='(val,index) in goodsImg' :key='index' class="desc-img" :src="val">
            </div>
        </div>


        <!-- 底部操作按钮 -->
        <div class='bottom-pay-wrap'>
            <div class='bottom-pay-left' @click='likeCar'>
                <span>1</span>
                <img src="./static/img/icon-car.png" width="45px" height="45px">
            </div>
            <div class='bottom-pay-right'>
                <button @click='addCar'>加入购物车</button>
                <button @click='pay'>立即购买</button>
            </div>
        </div>
        <!-- 底部操作按钮 -->

    </div>
    <script src="./static/js/com.js"></script>
    <script src="./static/js/jquery-3.3.1.min.js"></script>
    <script src="./static/js/swiper.min.js"></script>
    <script src="./static/js/mobileSelect.min.js"></script>
    <script src="./static/js/ADDRESS_ALL.js"></script>
    <script src='./static/js/vue.min.js'></script>
    <script src="./component/com/header.js"></script>
    <script src="./component/com/goodsInfo.js"></script>
    <script src="./component/com/goodsTitle.js"></script>
    <script src="./static/js/vue-service-goods-info.js"></script>
    <script>
        setTimeout(function() {
            var mySwiper = new Swiper('.swiper-container', {
                autoplay: true, //可选选项，自动滑动
                pagination: {
                    el: '.swiper-pagination',
                },
            })
        }, 500);
    </script>
</body>

</html>